<template>
  <div class="employees-container">
    <div class="app-container">
      <page-tools>
        <template #left>
          <div class="tips">
            <i class="el-icon-info" />
            <span>本月: 社保在缴 公积金在缴</span>
          </div>
        </template>
        <template #right>
          <el-button type="warning" size="small" @click="$router.push('/import')">
            excel导入
          </el-button>
          <el-button type="danger" size="small" @click="exportExcel"> excel导出 </el-button>
          <el-button type="primary" size="small" @click="addOpenDialog">新增员工</el-button>
        </template>
      </page-tools>
      <!-- 表格部分 -->
      <el-card style="margin-top: 10px">
        <el-table border :data="employeeList">
          <el-table-column width="60" label="序号" type="index" :index="indexNum" />
          <el-table-column label="姓名" prop="username" />
          <el-table-column label="工号" prop="workNumber" />
          <!--
            prop指定一个字段名称 此时原样输出 后端返回什么就显示什么
            如果你想要做定制化 拿到源数据利用作用域插槽 再做优化
           -->
          <el-table-column label="聘用形式">
            <template #default="{ row }">
              <!--
                差值表达式 内部支持三元运算 函数调用等等
                如果格式话的情况只有两种 -> 三元表达式
                如果格式化的情况很多 ->格式化函数
                方案: 格式化的函数{{fn()}} 渲染出来的是什么？ 渲染的函数的返回值
                思路: 把拿到的源数据作为实参传入格式化函数 在函数内部做一些格式化 最终return出去
               -->
              {{ formOfEmp(row.formOfEmployment) }}
            </template>
          </el-table-column>
          <el-table-column label="部门" prop="departmentName" />
          <el-table-column label="入职时间">
            <template #default="{ row }">
              {{ timeOfEnt(row.timeOfEntry) }}
            </template>
          </el-table-column>
          <el-table-column label="操作" fixed="right" width="200">
            <template #default="{ row }">
              <el-button type="text" size="small" @click="goDetail(row.id)">查看</el-button>
              <el-button type="text" size="small">分配角色</el-button>
              <el-button type="text" size="small" @click="delEmployee(row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页部分
          layout：定制分页起的结构 上一页 下一页 页数 跳转 切换条数
          分页逻辑： 总条数 / 每页条数 = 页数  总条数一定要传 每页条数默认10条
          点击分页切换table数据显示：点击时拿到当前的页数 -> 使用这个页数获取新的数据重新教给list

          传给后端一共20条数据 传给后端的size=10 后端的数据可以分两也出来
          如果前端size=5 前端可以分4页出来 请求3页4页哪里还有数据牙！

         -->
        <el-pagination
          :current-page="params.page"
          :page-sizes="[3, 6, 10, 100]"
          :page-size="params.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </el-card>
    </div>
    <!-- 弹窗区域 -->
    <add-employee
      :dialog-form-visible="dialogFormVisible"
      @close-dialog="closeDialog"
      @get-employee="getEmployee"
    />
  </div>
</template>
<script>
import { getEmployeeAPI, delEmployeeByIdAPI } from '@/api/employee'
import { getExportData } from '@/utils/excel.js'

import AddEmployee from './components/add-employee.vue'
import dayjs from 'dayjs'
export default {
  name: 'EmployeeIndex',
  components: {
    AddEmployee
  },
  data() {
    return {
      employeeList: [],
      params: {
        page: 1,
        size: 3
      },
      total: 0,
      // 控制弹唱
      dialogFormVisible: false
    }
  },
  mounted() {
    this.getEmployee()
  },
  methods: {
    // 序号
    indexNum(index) {
      return index + (this.params.page - 1) * this.params.size + 1
    },
    // 渲染数据
    async getEmployee() {
      const res = await getEmployeeAPI(this.params)
      // console.log(res)
      this.employeeList = res.rows
      this.total = res.total
    },
    // 处理聘用形式
    formOfEmp(value) {
      const MAP = {
        1: '正式',
        2: '非正式',
        4: '其他'
      }
      return MAP[value]
    },
    // 处理聘用时间
    timeOfEnt(val) {
      return dayjs(val).format('YYYY-MM-DD')
    },
    handleSizeChange(size) {
      this.params.size = size
      this.getEmployee()
    },
    handleCurrentChange(page) {
      this.params.page = page
      this.getEmployee()
    },
    // 关闭弹窗
    closeDialog() {
      this.dialogFormVisible = false
    },
    // 点击添加，打开弹窗
    addOpenDialog() {
      this.dialogFormVisible = true
    },
    // 删除
    async delEmployee(id) {
      this.$confirm('你确认要删除么?', '温馨提示')
        .then(async () => {
          await delEmployeeByIdAPI(id)
          // 重新渲染
          this.getEmployee()
          this.$message.success('删除员工成功')
        })
        .catch(error => {
          console.log(error)
        })
    },
    // 点击查看，跳转到详情页面
    goDetail(id) {
      this.$router.push({
        path: '/detail',
        query: {
          id
        }
      })
    },
    // 导出
    exportExcel() {
      // // import是一个动态导入模块的语法
      // // 只有用到它的时候菜回动态加载 进行打包不会出现在打出的包里 不会占用体积
      // import('@/vendor/Export2Excel').then(excel => {
      //   // 一个表格最重要两部分 1. 表头 他header 2. 表体 tbody
      //   const tHeader = ['Id', 'Title', 'Author', 'Readings', 'Date']
      //   // const filterVal = ['id', 'title', 'author', 'pageviews', 'display_time']
      //   // const list = this.list
      //   const data = []
      //   excel.export_json_to_excel({
      //     // 配置表头的位置  -> 数组格式
      //     header: tHeader,
      //     // 配置标题的位置-> 二维数组
      //     data,
      //     filename: 'excel-list', // 文件名称
      //     autoWidth: true, // 单元格宽度是否自动撑开
      //     bookType: 'xlsx' // excle文件类型
      //   })
      // })

      import('@/vendor/Export2Excel').then(async excel => {
        // excel表示导入的模块对象
        const res = await getEmployeeAPI(this.params)
        const headerRelation = {
          姓名: 'username',
          手机号: 'mobile',
          入职日期: 'timeOfEntry',
          工号: 'workNumber',
          聘用形式: 'formOfEmployment',
          部门: 'departmentName'
        }
        const { data } = getExportData(res.rows, headerRelation)
        excel.export_json_to_excel({
          header: Object.keys(headerRelation), // 表头 必填
          data: data, // 具体数据 必填
          filename: 'excel-list', // 文件名称
          autoWidth: true, // 宽度是否自适应
          bookType: 'xlsx' // 生成的文件类型
        })
      })
    }
  }
}
</script>
